import React, { Component } from 'react'
import { ActionBar } from 'react-vant';
import { addcar } from '../api/index'
// import { Icon,Toast } from 'react-vant';
import { Toast } from 'react-vant';
//购物车标志
import { shopcarlist } from '../api/index'
export default class Shopdetail extends Component {
    state = {
        shoplist: [],
        //购物车标志
        num: 0
    }
    async componentDidMount() {
        let res = await shopcarlist()
        this.setState({
            num: res.data.data.length,
            shoplist: this.props.location.state.data
        })
        console.log(this.state.shoplist);
    }

    //返回上一页这段代码1
    goBackPage = () => {
        this.history.push.goBack();

    }
    //到购物车页面
    shopcar = () => {
        this.props.history.push('/car')
    }
    //添加到购物车
    Addcar = async (item) => {
        await addcar(item)
        Toast.success('加入成功');
        let res = await shopcarlist()
        this.setState({
            num: res.data.data.length
        })
    }

    // //到支付页面
    // payment = async(item) => {

    //     await addpayment(item)
    //     Toast.success('支付成功');

    //     this.props.history.push('/payment')
    // }

    render() {
        const { shoplist } = this.state;
        console.log(this.state.shoplist);

        return (
            <div className='shopdetail'>
                <dl>
                    <p onClick={() => { this.props.history.goBack(); }} className="p"> &lt; </p>

                    <dt>
                        <img src={shoplist.img} alt='' />
                    </dt>
                    <dd>
                        <p>{this.state.shoplist.title}</p>
                        <span>{this.state.shoplist.price}￥</span>
                    </dd>
                </dl>
                <div className='shopdetail2'>
                    <p>
                        <span>主治功能</span>
                        <span>益肾补脑，养心安神</span>
                    </p>
                    <p>
                        <span>用法用量</span>
                        <span>益肾补脑，养心安神</span>
                    </p>
                </div>
                <div className='shopdetail3'>
                    <p><span>药房</span> 天士力大药房</p>
                    <p><span>运费</span> 运费6元·满99元包邮</p>
                    <p><span>服务</span> 益肾补脑，养心安神</p>
                </div>
                <div className="shopfooter">
                    <ActionBar>
                        <ActionBar.Icon icon="chat-o" badge={{ dot: false }} text="客服" />
                        <ActionBar.Icon icon="cart-o" badge={{ content: this.state.num }} text="购物车" onClick={() => { this.shopcar() }} />
                        <ActionBar.Button type="warning" text="加入购物车" onClick={() => { this.Addcar(this.state.shoplist) }} />
                        <ActionBar.Button type="danger" text="立即购买" />
                        {/* onClick={() => { this.payment(this.state.shoplist)}} */}
                    </ActionBar>
                </div>
            </div>
        )
    }
}
